
<template>
  <!-- 账簿维护/经费账录入 页面-->
  <div style="display:flex;flex-direction: column;height:100%">

    <div>
      <cus-allcard style="padding-bottom:0"
                   :showTitle="false">
        <div class="topBody">
          <div class="topBodyItem">
            <span class="itemSpan">账簿年度</span>
            <Select v-model="selectForm.accountbookId"
                    placeholder="请选择账簿年度"
                    @on-change="accountbookIdChange()"
                    class="itemImport">
              <Option v-for="item in selectForm.yearList"
                      :value="item.accountbookId"
                      :key="item.year">{{ item.year }}</Option>
            </Select>
          </div>

          <div class="topBodyItem">
            <span class="itemSpan">起始日期</span>
            <Date-picker type="date"
                         v-model="selectForm.starttime"
                         :clearable="false"
                         :options="timeOptions"
                         placeholder="请选择起始日期"
                         @on-change="tiemStartChange()"
                         class="itemImport"></Date-picker>
          </div>
          <div class="topBodyItem">
            <span class="itemSpan">截止日期</span>
            <Date-picker type="date"
                         v-model="selectForm.endtime"
                         :clearable="false"
                         :options="timeOptions"
                         placeholder="请选择截止日期"
                         @on-change="tiemEndChange()"
                         class="itemImport"></Date-picker>
          </div>
          <!-- <div class="topBodyItem">
            <span class="itemSpan">排列顺序：</span>
            <Select v-model="selectForm.order"
                    size="large"
                    placeholder="请选择排列顺序"
                    @on-change="orderChange()"
                    class="itemImport">
              <Option :value="0">正序</Option>
              <Option :value="1">倒序</Option>
            </Select>
          </div> -->
          <div class="topBodyItem">
            <span class="itemSpan">科目名称</span>
            <Select v-model="selectForm.subjectfullname"
                    placeholder="请选择科目"
                    @on-change="subjectNameChange()"
                    class="itemImport">
              <Option v-for="item in selectForm.subjectfullnameList"
                      :value="item.subjectfullname"
                      :key="item.subjectfullname">{{ item.subjectfullname }}</Option>
            </Select>
          </div>

          <div class="topBodyItem">
            <cus-Button type="primary"
                        @onClick="queryLMAccountApi"
                        class="ml_10"
                        v-permission="20">查询</cus-Button>
          </div>
        </div>
      </cus-allcard>
    </div>
    <div style="flex:1;"
         class="tableBox">
      <cus-allcard style="margin-top:24px;padding-top:24px"
                   :showTitle="false">
        <cusTable border
               :loading="form.loading"
               :columns="columns"
               :data="data"
               :bottomClass="['cus-page']"
               :size="vuex_config.tableSize">

          <template slot-scope="{ row }"
                    slot="recrice">
            {{totalPrices(row.recrice)}}
          </template>

          <template slot-scope="{ row }"
                    slot="recflour">
            {{totalPrices(row.recflour)}}
          </template>

          <!-- isTotalFlag==3，没有值时，显示查看详情以及凭证编号 -->
          <template slot-scope="{ row }"
                    slot="certificatesn">
            <span v-if="row.isTotalFlag==3||!row.isTotalFlag">{{row.certificatesn}}</span>
          </template>

          <template slot-scope="{ row }"
                    slot="recoil">
            {{totalPrices(row.recoil)}}
          </template>
          <template slot-scope="{ row }"
                    slot="recbean">
            {{totalPrices(row.recbean)}}
          </template>

          <template slot-scope="{ row }"
                    slot="payrice">
            {{totalPrices(row.payrice)}}
          </template>
          <template slot-scope="{ row }"
                    slot="payflour">
            {{totalPrices(row.payflour)}}
          </template>
          <template slot-scope="{ row }"
                    slot="payoil">
            {{totalPrices(row.payoil)}}
          </template>
          <template slot-scope="{ row }"
                    slot="paybean">
            {{totalPrices(row.paybean)}}
          </template>

          <template slot-scope="{ row }"
                    slot="remainrice">
            {{totalPrices(row.remainrice)}}
          </template>
          <template slot-scope="{ row }"
                    slot="remainflour">
            {{totalPrices(row.remainflour)}}
          </template>
          <template slot-scope="{ row }"
                    slot="remainoil">
            {{totalPrices(row.remainoil)}}
          </template>
          <template slot-scope="{ row }"
                    slot="remainbean">
            {{totalPrices(row.remainbean)}}
          </template>
          <!-- isTotalFlag==3，没有值时，显示查看详情以及凭证编号 -->
          <template slot-scope="{ row,index }"
                    slot="operation">
            <div class="flex">
              <cus-button v-if="row.isTotalFlag==3||!row.isTotalFlag"
                          type="text"
                          size="small"
                          style='color:#1E6FFF;'
                          @onClick="addAbstractButton(index,row)">
                查看详情
              </cus-button>
            </div>
          </template>
        </cusTable>
        <div style="width: 100%; display: flex; justify-content: flex-end">
          <cus-page :data="pages"
                    class="mt_10"
                    @pageChange="queryLMAccountApi()"></cus-page>
        </div>

      </cus-allcard>
    </div>
  </div>
</template>
<script>
import {
  getSubjectToCertificate,
  getAccountBookByUserId,
  queryLMAccount
} from '@/api/businessAccountingApi/essentialInformationApi'
export default {
  data () {
    return {
      form: {
        loading: false,
        name: '',
        startTime: '',
        endTime: ''
      },
      // 查询条件的集合
      selectForm: {
        year: null, // 账薄年度
        isjiezhuan: null, // 是否结转
        yearList: [], // 账薄年度列表
        accountbookId: null, // 账簿id
        starttime: null, // 起始日期
        endtime: null,// 截至日期
        order: 0, // 排列顺序
        subjectName: '', // 科目名称
        subjectNameList: [], // 科目名称列表
        subjectfullname: null,//科目名称
        subjectfullnameList: [],//科目全称列表

      },
      // 表头
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          minWidth: 70
        },
        {
          title: '凭证日期',
          key: 'certificatedate',
          align: 'center',
          minWidth: 120
        },
        {
          title: '凭证编号',
          slot: 'certificatesn',
          align: 'center',
          minWidth: 100
        },
        {
          title: '科目名称',
          key: 'subjectname',
          align: 'center',
          minWidth: 100
        },
        {
          title: '摘要',
          key: 'stapleabstract',
          align: 'center',
          minWidth: 100
        },
        {
          title: '收方/千克',
          align: 'center',
          children: [
            {
              title: '大米',
              slot: 'recrice',
              align: 'right',
              minWidth: 100
            },
            {
              title: '小麦粉',
              slot: 'recflour',
              align: 'right',
              minWidth: 100
            },
            {
              title: '食油',
              slot: 'recoil',
              align: 'right',
              minWidth: 100
            },
            {
              title: '大豆',
              slot: 'recbean',
              align: 'right',
              minWidth: 100
            },
          ]
        },
        {
          title: '付方/千克',
          align: 'center',
          children: [
            {
              title: '大米',
              slot: 'payrice',
              align: 'right',
              minWidth: 100
            },
            {
              title: '小麦粉',
              slot: 'payflour',
              align: 'right',
              minWidth: 100
            },
            {
              title: '食油',
              slot: 'payoil',
              align: 'right',
              minWidth: 100
            },
            {
              title: '大豆',
              slot: 'paybean',
              align: 'right',
              minWidth: 100
            },
          ]
        },
        {
          title: '剩余/千克',
          align: 'center',
          children: [
            {
              title: '大米',
              slot: 'remainrice',
              align: 'right',
              minWidth: 100
            },
            {
              title: '小麦粉',
              slot: 'remainflour',
              align: 'right',
              minWidth: 100
            },
            {
              title: '食油',
              slot: 'remainoil',
              align: 'right',
              minWidth: 100
            },
            {
              title: '大豆',
              slot: 'remainbean',
              align: 'right',
              minWidth: 100
            },
          ]
        },

        {
          title: '操作',
          slot: 'operation',
          align: 'center',
          fixed: 'right',
          minWidth: 100
        }
      ],
      data: [], // 表格列表
      // 分页
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      timeOptions: {
        disabledDate (date) {
          return (
            date < new Date(new Date().Format('yyyy') - 1 + '-12-31') || date > new Date(new Date().Format('yyyy-MM-dd'))
          )
        }
      },
  
    }
  },
  mounted () {


    this.selectForm.starttime = new Date().Format('yyyy') + '-01-01'
    this.selectForm.endtime = new Date().Format('yyyy-MM-dd')
    this.getAccountBookByUserIdApi()// 根据用户id查询账簿 接口
  },

  methods: {
    // 千位分割符
    totalPrices (recmoney) {
      const intPart = Math.trunc(recmoney)//整数部分
      let floatPart = 0
      const intPartFormat = intPart.toString().replace(/\B(?=(\d{3})+$)/g, ',')
      const valuArray = Number(recmoney).toString().split('.')

      if (valuArray.length === 2) {//有小数部分
        if (valuArray[1]) {
          if (valuArray[1].length === 1) {
            valuArray[1] += '0'
          }
        } else {
          valuArray[1] = '00'
        }
        floatPart = valuArray[1]//取得小数部分

        return intPartFormat + '.' + floatPart
      } else {
        return intPartFormat + '.00'
      }
    },

    // 根据类型、用户id和账簿id查询所有在用科目(不分页) 接口
    getSubjectToCertificateApi () {
      this.form.loading = true
      return new Promise((resolve) => {
        getSubjectToCertificate({
          userid: this.vuex_user.base.id, // 用户id
          accountBookId: this.selectForm.accountbookId, // 账簿id
          subjectType: 1 //  摘要类型(0经费;1粮秣)
        }).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.selectForm.subjectfullnameList = res.subjectlist
            this.selectForm.subjectfullname = res.subjectlist[0].subjectfullname
            this.queryLMAccountApi()// 凭证查询 接口
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 根据用户id查询账簿 接口
    getAccountBookByUserIdApi () {
      this.form.loading = true
      return new Promise((resolve) => {
        getAccountBookByUserId({
          userid: this.vuex_user.base.id // 用户id
        }).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.selectForm.yearList = res.basAccountbookList
            this.selectForm.accountbookId = res.basAccountbookList[0].accountbookId
            this.selectForm.year = res.basAccountbookList[0].year
            this.selectForm.isjiezhuan = res.basAccountbookList[0].isjiezhuan
            if (this.selectForm.year == new Date().Format('yyyy')) {
              this.selectForm.starttime = new Date().Format('yyyy') + '-01-01' // 起始日期
              this.selectForm.endtime = new Date().Format('yyyy-MM-dd') // 截止日期
            } else {
              this.selectForm.starttime = this.selectForm.year + '-01-01' // 起始日期
              this.selectForm.endtime = this.selectForm.year + '-12-31' // 截止日期
            }
            this.optionDate() // 限制日期封装方法
            this.getSubjectToCertificateApi()// 根据类型、用户id和账簿id查询所有在用科目(不分页) 接口
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 凭证查询 接口
    queryLMAccountApi () {
      if (this.selectForm.starttime == '' || this.selectForm.endtime == '') {
        this.$Message.info("起始/截止日期不能为空")
        return
      }
      let valueData = {
        accountBookId: this.selectForm.accountbookId,
        beginTime: new Date(this.selectForm.starttime).Format('yyyy-MM-dd'),
        endTime: new Date(this.selectForm.endtime).Format('yyyy-MM-dd'),
        order: Number(this.selectForm.order),
        subjectFullName: this.selectForm.subjectfullname,
        current: this.pages.page,
        size: this.pages.pageSize
      }
      this.form.loading = true
      return new Promise((resolve) => {
        queryLMAccount(valueData).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.data = res.data
            this.pages.pageTotal = res.totalSize
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 账簿年度改变回调
    accountbookIdChange () {
      this.pages.page = 1
      this.selectForm.yearList.forEach(element => {
        if (element.accountbookId === this.selectForm.accountbookId) {
          this.selectForm.year = element.year
          this.selectForm.isjiezhuan = element.isjiezhuan
          if (this.selectForm.year == new Date().Format('yyyy')) {
            this.selectForm.starttime = new Date().Format('yyyy') + '-01-01' // 起始日期
            this.selectForm.endtime = new Date().Format('yyyy-MM-dd') // 截止日期
          } else {
            this.selectForm.starttime = this.selectForm.year + '-01-01' // 起始日期
            this.selectForm.endtime = this.selectForm.year + '-12-31' // 截止日期
          }
          this.optionDate() // 限制日期封装方法
        }
      })
      this.queryLMAccountApi()
    },
    // 限制日期封装方法
    optionDate () {
      if (this.selectForm.year == new Date().Format('yyyy')) {
        this.timeOptions = {
          disabledDate (value) {
            return (
              value < new Date(new Date().Format('yyyy') - 1 + '-12-31') || value > new Date(new Date().Format('yyyy-MM-dd'))
            )
          }
        }
      } else {
        let startOption = (Number(this.selectForm.year) - 1) + '-12-31' // 限制开始能点日期 必须先建变量存储，才能放进new Date()
        let endOption = (Number(this.selectForm.year)) + '-12-31' // 限制结束能点日期 必须先建变量存储，才能放进new Date()
        this.timeOptions = {
          disabledDate (value) {
            return value < new Date(startOption) || value > new Date(endOption)
          }
        }
      }
    },
    // 起始日期改变回调
    tiemStartChange () {
      this.selectForm.starttime = new Date(this.selectForm.starttime).Format('yyyy-MM-dd')
      this.selectForm.endtime = new Date(this.selectForm.endtime).Format('yyyy-MM-dd')
      if (new Date(this.selectForm.starttime).Format('MM') > new Date(this.selectForm.endtime).Format('MM')) { //起始日期月份 大于 截止日期月份
        this.$Message.info("起始日期大于截止日期")
        this.selectForm.endtime = ''
      } else if (new Date(this.selectForm.starttime).Format('MM') == new Date(this.selectForm.endtime).Format('MM')) { //起始日期月份 等于 截止日期月份
        if (new Date(this.selectForm.starttime).Format('dd') > new Date(this.selectForm.endtime).Format('dd')) {
          this.$Message.info("起始日期大于截止日期")
          this.selectForm.endtime = ''
        }
      }
    },
    // 截止日期改变回调
    tiemEndChange () {
      this.selectForm.starttime = new Date(this.selectForm.starttime).Format('yyyy-MM-dd')
      this.selectForm.endtime = new Date(this.selectForm.endtime).Format('yyyy-MM-dd')
      if (new Date(this.selectForm.starttime).Format('MM') > new Date(this.selectForm.endtime).Format('MM')) { //起始日期月份 大于 截止日期月份
        this.$Message.success("截止日期大于起始日期")
        this.selectForm.starttime = ''
      } else if (new Date(this.selectForm.starttime).Format('MM') == new Date(this.selectForm.endtime).Format('MM')) { //起始日期月份 等于 截止日期月份
        if (new Date(this.selectForm.starttime).Format('dd') > new Date(this.selectForm.endtime).Format('dd')) {
          this.$Message.success("截止日期大于起始日期")
          this.selectForm.starttime = ''
        }
      }
    },
    // 排列顺序改变回调
    orderChange () {
      this.pages.page = 1
      this.queryLMAccountApi()
    },
    // 科目名称改变回调
    subjectNameChange () {
      this.pages.page = 1
      this.queryLMAccountApi()
    },
    // 添加摘要按钮
    addAbstractButton (index, valueData) {
      this.$router.push({
        path: '/view/supplierChangeAnalysis/accountBookQuery/accountBookQueryLMZItem',
        query: {
          year: this.selectForm.year,
          isjiezhuan: this.selectForm.isjiezhuan,
          valueData: valueData,
          superior: 'JFZ' // 区分时添加进来 还是修改进来 add/edit
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.topBody {
  display: flex;
  padding-top: 24px;
  align-items: center;
  flex-wrap: wrap;
  .topBodyItem {
    display: flex;
    align-items: center;
    margin-right: 12px;
    margin-bottom: 20px;
    .itemSpan {
      white-space: nowrap;
      width: 80px;
      text-align: right;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85) !important;
      margin-right: 10px;
    }
    .itemImport {
      width: 200px;
    }
  }
}
</style>
